<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>测试</button>
  <script>
    document.querySelector('button').addEventListener('click', function () {
      // 1.实例化异步对象
      const xhr = new XMLHttpRequest()
      // 2.设置请求的 方法和 地址
      xhr.open('post', 'http://ajax-api.itheima.net/api/login')
      // 3.请求头设置
      xhr.setRequestHeader('Content-Type', 'application/json') //键值对形式
      // 4.注册回调函数 服务器响应内容回来之后触发
      xhr.addEventListener('load', function () {
        console.log(xhr.response) //返回的是字符串
      })
      // 5.发送请求
      let obj = {
        username: 'admin',
        password: '123456',
      }
      xhr.send(JSON.stringify(obj)) //传递参数写在括号里 且是字符串形式
    })
  </script>
</body>

</html>